<template>
  <div>取值语法 {{ msg }}</div>
  <div>可以在取值语法中运算 {{ num * 20 }}</div>
  <div v-for="(item,index) in arr" :key="index">遍历语法 {{ item }}</div>
  <div v-for="(item, index) in infos" :key="index">
    {{ item.name }} -- {{ item.age }}
  </div>
  <div v-if="is">是否渲染 {{ is }}</div>
  <div v-show="isShow"> display {{ isShow }}</div>
  <div v-text="text"/>
  <div v-html="html"/>
</template>
<script>
export default {
  name: "LessonOne",
  data() {
    return {
      html: "<h1>123</h1>",
      text: "<h1>123</h1>",
      isShow: true,
      is: true,
      infos: [
        {name: "Alex", age: 19},
        {name: "Max", age: 28},
      ],
      arr: [1, 2, 3, 4, 5],
      num: 100,
      msg: "hello vue",
    }
  }

}
</script>

<style scoped>

</style>
